<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Vue.js 源代码学习</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../../libs/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="../../libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="../../libs/vue/2.5.13/vue.min.js"></script>
    <script src="../../libs/vue-router/3.0.1/vue-router.js"></script>
    <script src="../../libs/jquery/3.2.1/jquery.slim.min.js"></script>
    <script src="../../libs/propper.js/1.13.0/umd/popper.min.js"></script>
    <style>
        #app {
            height: 100%;
            display: flex;
            flex-direction: column;
            flex: 1;
        }

        .nav {
            height: 80px;
            line-height: 80px;
            display: flex;
            text-align: center;
        }

        .nav-item {
            flex: 1;
            text-decoration: none;
        }

        .nav-item:link,
        .nav-item:visited {
            background-color: white;
            color: black;
        }

        .nav-item:hover,
        .nav-item:active {
            color: white;
            background-color: #C8C6C6;
        }

        .content {
            height: 100%;
            background:blue;
            flex:1;
            display:flex;
            justify-content: center;
            align-items:center;
        }
    </style>
</head>

<body>
    <div id="app">
        <router-view class="view"></router-view>
        <div class="nav">
            <router-link class="nav-item" to="/langren">狼人杀</router-link>
            <router-link class="nav-item" to="/sanguo">三国杀</router-link>
            <router-link class="nav-item" to="/yingxiong">英雄杀</router-link>
        </div>
    </div>
    <script type="text/template" id='langren'>
        <div class="content"><p>我是langren！</p></div>
    </script>
    <script type="text/template" id='sanguo'>
        <div class="content"><p>我是sanguo！</p></div>
    </script>
    <script type="text/template" id='yingxiong'>
        <div class="content"><p>yingxiong</p></div>
    </script>
    <script type="text/template" id='content'>
        <div class="content"><p>content</p></div>
    </script>

    <script>
        Vue.use(VueRouter);
        const router = new VueRouter({
            routes: [{
                path: '/langren',
                component: { template: document.getElementById('langren').innerHTML }
            }, {
                path: '/sanguo',
                component: { template: document.getElementById('sanguo').innerHTML }
            }, {
                path: '/yingxiong',
                component: { template: document.getElementById('yingxiong').innerHTML }
            }, {
                path: '/',
                component: { template: document.getElementById('content').innerHTML }
            }]
        });

        const app = new Vue({
            el: '#app',
            router
        });
    </script>
</body>
<script src="../../libs/bootstrap/4.0.0-beta.3/bootstrap.min.js"></script>

</html>